
  <template>
    <span style="margin-left:10px;margin-right: 10px;">
        <el-button type="text" icon="el-icon-video-play" @click="ShowImport()">查看条码</el-button>
        <el-dialog :title="text" :visible.sync="show" width="50%" :lock-scroll="true" height="800px">
            <div v-if="text">
                <img :id="'barcode-' + id" />
            </div>
            <div v-else>
                <el-empty description="没有条码"></el-empty>
            </div>
        </el-dialog>
    </span>
</template>

<script>
import {
    post
} from "@/utils/http";
import {
    FullConvertUrlArray, GetFileNameByPath
} from "@/utils/index"
import store from "@/store";
import JsBarcode from "jsbarcode";

export default {

    props: {
        text: {
            type: String,//默认的请求路径
            default: "",
        },
    },
    watch: {

    },
    data() {
        let nextId = this.$comm.GenerateRandomId();

        return {
            id: nextId,
            show: false,

        }
    },
    created() {


    },
    mounted() {


    },
    methods: {
        ShowImport() {
            if (!this.text) {
                this.$message({
                    message: '请先完成资源上传!',
                    type: 'warning'
                });
                return;
            }
  
            this.show = true;
            setTimeout(() => {
                this.getBarcode();

            }, 200);

        },
        getBarcode() {
            let options = {
                text: this.$props.text,//等同于JsBarcode第二个参数
                fontSize: 10,//条形码下方文字的大小
                height: 60,//条形码的高度
                width: 5.5,//条形码 条的宽度不是总体的宽度 (宽度过小 扫描枪会扫描不出来 天坑我踩过)
                displayValue: false,//隐藏条形码下方文本
            };
            // JsBarcode第一个参数是容器ID名 第二个参数是条形码扫描后的内容(默认条形码的内容会在条形码下方展示) 第三个参数是方法的配置项(具体配置查看官网)
            JsBarcode("#barcode-" + this.id, '5', options);

        }


    }
}

</script>

